import React from 'react';
import { Typography } from 'antd';
import { DeleteOutlined, FileTextOutlined } from '@ant-design/icons';
import { useLanguage } from '../../i18n/I18nProvider';
import CleanupCard from '../../components/Cleanup/CleanupCard';
import './CleanupTools.scss';

const { Title, Paragraph } = Typography;

const CleanupTools: React.FC = () => {
  const { t } = useLanguage();

  // 清理工具列表
  const cleanupTools = [
    {
      id: 'node-modules',
      title: t('cleanup.nodeModules.title'),
      description: t('cleanup.nodeModules.description'),
      icon: <DeleteOutlined />,
      path: '/cleanup/node-modules',
    },
    {
      id: 'logs',
      title: t('cleanup.logs.title'),
      description: t('cleanup.logs.description'),
      icon: <FileTextOutlined />,
      path: '/cleanup/logs',
    },
    // 可以根据需要添加更多工具
  ];

  return (
    <div className="cleanup-tools-page page-container">
      <div className="page-header">
        <Title level={2}>{t('cleanup.title')}</Title>
        <Paragraph className="page-description">
          {t('cleanup.description')}
        </Paragraph>
      </div>

      <div className="card-container">
        {cleanupTools.map((tool) => (
          <CleanupCard
            key={tool.id}
            title={tool.title}
            description={tool.description}
            icon={tool.icon}
            path={tool.path}
          />
        ))}
      </div>
    </div>
  );
};

export default CleanupTools;
